<template class="FormPermissionUserEdit">
  <a-form :form="form" layout="inline">
    <div>
      <rx-grid ref="table"
               :dataSource="headerFields"
               :allowRowSelect="true"
               :multiSelect="true"
               :showPage="false"
               :columns="headerColumns"
               :heightauto="true"
      >
          <span slot="filterEdit">
             <a-checkbox :checked="editShow" @change="filterEdit('edit')">
                 {{$ti18('rxList.editBtn','编辑')}}
             </a-checkbox>
          </span>
          <span slot="filterRead">
              <a-checkbox :checked="readShow" @change="filterEdit('read')">
                  {{i18n('list.onlyRead','只读')}}
              </a-checkbox>
          </span>
          <span slot="filterRequire">
               <a-checkbox :checked="requireShow" @change="filterEdit('require')">
                   {{i18n('list.required','必填')}}
               </a-checkbox>
          </span>
          <span slot="name" slot-scope="{text,record,index,blur}">
          {{text}}
        </span>
          <span slot="alias" slot-scope="{text,record,index,blur}">
          {{text}}
        </span>
          <span slot="edit" slot-scope="{text,record,index}">
               <template v-if="record.control=='upload'">
                 <a-checkbox :checked="filterPermissionEdit(record.edit,'edit')" @click.stop="compile(record,'edit')">上传</a-checkbox>
                 <my-icon v-if="!filterPermissionEdit(record.edit,'edit')" @click="editRecord(record,index,'edit')" class="icon-left"
                          :class="{active:active(record,'edit')}"
                          v-bind="bindTitle(record,'edit')"
                          type="iconsetup"></my-icon>

                 <template v-if="record.edit!='none'">
                    <a-checkbox :checked="filterPermissionEdit(record.del,'del')" @click.stop="compile(record,'del')">删除</a-checkbox>
                    <my-icon v-if="!filterPermissionEdit(record.del,'del')" @click="editRecord(record,index,'del')" class="icon-left"
                             :class="{active:active(record,'del')}"  type="iconsetup" v-bind="bindTitle(record,'del')"></my-icon>

                    <a-checkbox :checked="filterPermissionEdit(record.editDown,'editDown')" @click.stop="compile(record,'editDown')">下载</a-checkbox>
                    <my-icon v-if="!filterPermissionEdit(record.editDown,'editDown')" @click="editRecord(record,index,'editDown')"
                             :class="{active:active(record,'editDown')}" class="icon-left"
                             type="iconsetup" v-bind="bindTitle(record,'edit')"></my-icon>

                 </template>
               </template>
               <template v-else>
                  <a-checkbox :checked="filterPermissionEdit(record.edit,'edit')" @click.stop="compile(record,'edit')"></a-checkbox>
                 <my-icon v-if="!filterPermissionEdit(record.edit,'edit')" class="icon-left"
                          @click="editRecord(record,index,'edit')" v-bind="bindTitle(record,'edit')" :class="{active:active(record,'edit')}"  type="iconsetup"></my-icon>

               </template>

          </span>
          <span slot="read" slot-scope="{text,record,index}">
            <template v-if="record.control=='upload'">
              <a-checkbox :checked="filterPermissionEdit(record.read,'read')" @click.stop="compile(record,'read')">查看</a-checkbox>
              <my-icon v-if="!filterPermissionEdit(record.read,'read')" @click="editRecord(record,index,'read')"
                       :class="{active:active(record,'read')}" class="icon-left"   v-bind="bindTitle(record,'read')"
                        type="iconsetup"></my-icon>

              <template v-if="record.read!='none'">
                <a-checkbox :checked="filterPermissionEdit(record.readDown,'readDown')" @click.stop="compile(record,'readDown')">下载</a-checkbox>
                <my-icon v-if="!filterPermissionEdit(record.readDown,'readDown')" v-bind="bindTitle(record,'readDown')" @click="editRecord(record,index,'readDown')"
                       :class="{active:active(record,'readDown')}" class="icon-left"
                        type="iconsetup"></my-icon>
              </template>


            </template>
            <template v-else>
              <a-checkbox :checked="filterPermissionEdit(record.read,'read')" @click.stop="compile(record,'read')"></a-checkbox>
              <my-icon v-if="!filterPermissionEdit(record.read,'read')" @click="editRecord(record,index,'read')"
                       :class="{active:active(record,'read')}" class="icon-left" v-bind="bindTitle(record,'read')"
                       type="iconsetup"></my-icon>

            </template>

        </span>
          <span slot="require" slot-scope="{text,record,index,blur}">
          <a-checkbox :checked="filterPermissionEdit(record.require,'require')" @click.stop="compile(record,'require')"></a-checkbox>
            <my-icon v-if="!filterPermissionEdit(record.require,'require')" @click="editRecord(record,index,'require')"
                     :class="{active:active(record,'require')}" class="icon-left" v-bind="bindTitle(record,'require')"
                     type="iconsetup"></my-icon>

        </span>
      </rx-grid>
    </div>

  </a-form>
</template>
<script>
  import {BaseForm, RxLayout, RxGrid, RxCodemirror} from "@lowcode/jpaas-common-lib";
  import DialogBox from "@/assets/js/DialogBox";

  export default {
    name: 'FormPermissionUserEdit',
    mixins: [BaseForm],
    props: {
      mainData: {
        type: Array,
        default: []
      },
        nodeProps:{
            type: Object,
            default: {}
        }
    },
    components: {
      RxLayout,
      RxGrid,
      RxCodemirror,
    },
    data() {
      return {
        editIndex:0,
        selectAllType:"",
        selectOneType:"",
        changeValue: {},
        activeKey: "columnConf",
        isAllowDataGrant: false,
        isLeftTree: 'NO',
        expandedRowKeys: [],
        fieldDatas: [],
        headerFields: [],
          headerColumns: [
              {title: this.i18n('form.name','字段名称'),width:'15%',dataIndex: 'name', allowCellEdit: true, scopedSlots: {customRender: 'name'}},
              {title: this.i18n('form.key','字段Key'),width:'15%', dataIndex: 'alias', allowCellEdit: true, scopedSlots: {customRender: 'alias'}},
              {
                  width:'25%',
                  dataIndex: 'edit',
                  allowCellEdit: false,
                  slots: { title: 'filterEdit'},
                  scopedSlots: {customRender: 'edit'}
              },
              {
                  width:'25%',
                  dataIndex: 'read',
                  allowCellEdit: false,
                  slots: { title: 'filterRead'},
                  scopedSlots: {customRender: 'read'}
              },
              {
                  dataIndex: 'require',
                  allowCellEdit: false,
                  slots: { title: 'filterRequire'},
                  scopedSlots: {customRender: 'require'}
              }],
          editShow:true,
          readShow:true,
          requireShow:true,
      }
    },
    computed:{
      active(){
        return (record,type)=>{
          return record[type]!='everyone' && record[type]!='none';
        }
      },
      bindTitle(){
        return (record,type)=>{
          let hasTitle= record[type]!='everyone' && record[type]!='none';
          if(hasTitle){
            return {title:'已设置'};
          }else{
            return {}
          }
        }
      }
    },
    created() {
      this.headerFields = this.mainData;
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formPermiss",key);
        },
        filterPermissionEdit(value,name){
            if(value=='everyone'){
                return true
            }
            if(name =='edit'){
                this.editShow = false;
            }else if(name =='read'){
                this.readShow = false;
            }else if(name =='require'){
                this.requireShow = false
            }
            return false

        },
      editRecord(record,index,type){
        var self_=this;
        this.selectOneType=type;
        this.type =type;
        this.dataType = record.dataType;
        this.editIndex=index;
          let name = {
              'read':'只读',
              'edit':'编辑',
              'require':'必填',
              'editDown':'下载',
              'del':'删除',
              'readDown':'下载',
          }
          let title = '['+record.name+']'+'字段'+'['+name[type]+']';
        DialogBox.openPermissionUser(this,record[type],function(self_,data){
          var datas = self_.$refs.table.getData();
          var row =datas[self_.editIndex];
          self_.setChangeValues(data,row,self_.selectOneType);
        },this.nodeProps,title);
      },
        //  全选编辑
        filterEdit(name){
            var show = false;
            if(name=='edit'){
                this.editShow = !this.editShow;
                show = this.editShow;
            }else if(name=='read'){
                this.readShow =!this.readShow;
                show = this.readShow
            }else if(name =='require'){
                this.requireShow =!this.requireShow;
                show =this.requireShow;
            }
            //全部有权限
            var permission ={};
            if(show){
                permission[name]= 'everyone';
                permission[name+'_name']= this.i18n('list.everyone','所有人');
            }else {
                permission[name]= 'none';
                permission[name+'_name']= this.i18n('list.none','无权限');
            }
            this.headerFields = this.headerFields.map(res=>{
                res[name] = permission[name];
                res[name+'_name'] = permission[name+'_name'];
                return res
            })
            this.$refs.table.loadData();
        },
        compile(record,type){
            if(record[type] =='everyone'){
                record[type]='none';
                record[type+'_name']=this.i18n('list.none','无权限');
            }else {
                record[type]='everyone';
                record[type+'_name']=this.i18n('list.everyone','所有人');
            }
            var show = true;
            this.headerFields.map(res=>{
                if(res[type]=='none'){
                    show = false
                }
            })
            this[type+'Show'] = show;
        },
      setAttrsValue(type) {
        this.selectAllType=type;
        this.type = type;
        var selectDatas = this.$refs.table.getSelectedRows();
        this.dataType = selectDatas[0].dataType;
        if (!selectDatas || selectDatas.length == 0) {
          this.$message.info(this.i18n('msg.setAttrMsg','请先选择需要设置的列数据，再进行操作！'));
          return;
        }
        var self_=this;
        DialogBox.openPermissionUser(this,selectDatas[0][type],function(self_,data){
          var selectDatas = self_.$refs.table.getSelectedRows();
          for(var i=0;i<selectDatas.length;i++){
            var row =selectDatas[i];
            self_.setChangeValues(data,row,self_.selectAllType);
          }
        });
      },
      setChangeValues(data,row,type){
        var typeName = type + "_name";
        var rowData={};
        rowData[type] = data.value;
        rowData[typeName] = data.label;
        this.$refs.table.updateRow(row,rowData);
      },
      getMainData(){
        var returnObj ={};
        var dataList =this.$refs.table.getData();
        if(!dataList || dataList.length==0){
          return returnObj;
        }
        for(var i=0;i<dataList.length;i++){
          var dataObj =dataList[i];
          returnObj[dataObj.alias]=dataObj;
        }
        return returnObj;
      }
    },
      watch:{
          "mainData":function (val,oldVal){
              this.headerFields = this.mainData;
          }
      }
  }
</script>
<style scoped>
.FormPermissionUserEdit >>> .gridContent{
    border-bottom: none!important;
}
  .ant-btn-primary{
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 0;
  }
  .btn-inline-box{
    margin: 10px 20px 6px 20px;
  }

  .active{
    color:green;
  }
  .icon-left{
    margin-left: 2px;
  }

  .ant-checkbox-wrapper-checked{
    margin-left: 0px !important;
  }
</style>